// stylelint-disable selector-max-compound-selectors, selector-class-pattern

// NOTE: This file contains highlighting styles for both client-side highlighted code (hljs-)
// and server-side highlighted code (hl-).

.hljs {
    display: block;
    overflow-x: auto;
    color: inherit;
}

.theme-light {
    // Adapted from https://github.com/highlightjs/highlight.js/blob/1b10552510a1ec13a3d30d46281dc268553ad157/src/styles/vs.css

    .hljs-comment,
    .hljs-quote,
    .hljs-variable {
        color: #008000;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-built_in,
    .hljs-name,
    .hljs-tag {
        color: #0000ff;
    }

    .hljs-string,
    .hljs-title,
    .hljs-section,
    .hljs-attribute,
    .hljs-literal,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-type {
        color: #a31515;
    }

    .hljs-number {
        color: #09885a;
    }

    .hljs-deletion,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-meta {
        color: #2b91af;
    }

    .hljs-doctag {
        color: #808080;
    }

    .hljs-attr {
        color: #0451a5;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link {
        color: #00b0e8;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-addition {
        color: #22863a;
        background: rgba(155, 185, 85, 0.2);
    }

    .hljs-deletion {
        color: #b31d28;
        background: rgba(255, 0, 0, 0.2);
    }

    // Theme-light styles for syntect-highlighted code start here

    // These colors are my description of them.
    // They don't match up with other defined colors.
    --hl-yellow: #b58900;
    --hl-green: #859900;
    --hl-red: #dc322f;
    --hl-orange: #cb5b16;
    --hl-blue: #268bd2;
    --hl-cyan: #2aa198;
    --hl-eggshell: #eee8d5;
    --hl-purple: #6c71c4;
    --hl-pink: #d33682;

    // These grays are not ordered at all,
    // they're just in the order they were defined
    --hl-gray-0: #767676;
    --hl-gray-1: #839496;
    --hl-gray-2: #93a1a1;
    --hl-gray-3: #657b83;
    --hl-gray-4: #586e75;
    --hl-gray-5: #2b3750;

    // bg colors
    --hl-bg-red: #f5dbdd;
    --hl-bg-green: #deeade;

    .hl-source,
    .hl-text {
        color: var(--hl-gray-3);
    }

    // Comments
    .hl-comment,
    .hl-meta.hl-documentation {
        color: var(--hl-gray-0);
    }

    /* String constants */
    // contents
    .hl-string {
        color: var(--hl-cyan);
    }
    // surrounding quotes
    .hl-punctuation.hl-definition.hl-string {
        color: var(--hl-gray-1);
    }
    // escape sequences
    .hl-constant.hl-character.hl-escape {
        color: var(--hl-red);
    }

    // Other constants
    .hl-constant {
        color: var(--hl-yellow);
    }
    .hl-constant.hl-language {
        color: var(--hl-yellow);
    }
    .hl-constant.hl-numeric {
        color: var(--hl-purple);
    }
    .hl-constant.hl-character {
        color: var(--hl-orange);
    }
    .hl-constant.hl-other {
        color: var(--hl-orange);
    }
    .hl-meta.hl-preprocessor {
        color: var(--hl-yellow);
    }

    // Variables
    .hl-variable {
        color: var(--hl-blue);
    }
    // function calls, etc.
    .hl-variable.hl-function {
        color: var(--hl-yellow);
    }
    // reserved variables like this or self
    .hl-variable.hl-language {
        color: var(--hl-pink);
    }
    // punctuation in variable definitions like $ in shell
    .hl-punctuation.hl-definition.hl-variable {
        color: var(--hl-green);
    }

    // Keywords and storage
    .hl-keyword.hl-operator {
        color: var(--hl-gray-3);
    }
    .hl-keyword {
        color: var(--hl-green);
        &.hl-import,
        &.hl-include {
            color: var(--hl-orange);
        }
        &.hl-class {
            color: var(--hl-yellow);
        }
    }
    .hl-keyword.hl-other.hl-new {
        color: var(--hl-red);
    }
    .hl-keyword.hl-other.hl-special-method {
        color: var(--hl-orange);
    }
    .hl-storage {
        color: var(--hl-green);
    }
    // const, public, inline
    .hl-storage.hl-modifier {
        color: var(--hl-gray-4);
    }
    // int, bool, char
    .hl-storage.hl-type {
        color: var(--hl-blue);
    }

    // Entities
    .hl-entity.hl-name {
        color: var(--hl-yellow);
    }
    .hl-entity.hl-name.hl-tag {
        color: var(--hl-blue);
    }
    .hl-entity.hl-other.hl-inherited-class {
        color: var(--hl-blue);
    }
    .hl-entity.hl-other.hl-attribute-name {
        color: var(--hl-yellow);
    }

    // Support (builtin libraries like browser)
    .hl-support.hl-function {
        color: var(--hl-green);
    }
    .hl-support.hl-function.hl-construct {
        color: var(--hl-red);
    }
    .hl-support.hl-type.hl-exception {
        color: var(--hl-orange);
    }
    .hl-support.hl-type,
    .hl-support.hl-class {
        color: var(--hl-green);
    }
    // color constants #ababab
    .hl-support.hl-constant.hl-color {
        color: var(--hl-yellow);
    }

    // Braces
    .hl-punctuation.hl-section.hl-braces {
        color: var(--hl-gray-3);
    }
    .hl-punctuation.hl-section.hl-block {
        color: var(--hl-gray-3);
    }

    // Parens
    .hl-punctuation.hl-section.hl-parens {
        color: var(--hl-gray-3);
    }
    .hl-punctuation.hl-section.hl-group {
        color: var(--hl-gray-3);
    }

    // Brackets
    .hl-punctuation.hl-section.hl-brackets {
        color: var(--hl-blue);
    }

    // Other
    // line continuation \
    .hl-punctuation.hl-separator.hl-continuation {
        color: var(--hl-red);
    }
    // tag delimiters <>
    .hl-punctuation.hl-definition.hl-tag {
        color: var(--hl-gray-2);
    }
    .hl-invalid {
        background: var(--hl-bg-red);
    }

    //////////////////////////////////
    // Language-specific highlights //
    //////////////////////////////////

    .hl-source.hl-scss {
        .hl-invalid.hl-deprecated.hl-color.hl-w3c-non-standard-color-name {
            color: var(--hl-yellow);
        }
        .hl-keyword.hl-control.hl-untitled {
            color: var(--hl-yellow);
        }
    }

    .hl-source.hl-less {
        .hl-keyword.hl-control.hl-html.hl-elements {
            color: var(--hl-yellow);
        }
    }

    .hl-source.hl-scss,
    .hl-source.hl-css,
    .hl-source.hl-less {
        .hl-entity.hl-name.hl-tag {
            color: var(--hl-yellow);
        }
        .hl-entity.hl-other {
            &.hl-class {
                color: var(--hl-yellow);
            }
            &.hl-id {
                color: var(--hl-yellow);
            }
            &.hl-pseudo-class {
                color: var(--hl-blue);
            }
            // :hover
            &.hl-pseudo-element {
                color: var(--hl-blue);
            }
        }
    }

    .hl-source.hl-ruby {
        .hl-keyword.hl-other.hl-special-method {
            color: var(--hl-orange);
        }
        .hl-variable.hl-other.hl-constant {
            color: var(--hl-yellow);
        }
        .hl-constant.hl-other.hl-symbol {
            color: var(--hl-cyan);
        }
        .hl-punctuation.hl-definition.hl-constant {
            color: var(--hl-cyan);
        }
    }

    .hl-source.hl-php {
        .hl-meta.hl-array .hl-support.hl-function.hl-construct {
            color: var(--hl-yellow);
        }
    }

    // c\2b\2b is escaped c++
    .hl-source.hl-c,
    .hl-source.hl-c\2b\2b {
        .hl-entity.hl-name.hl-function.hl-preprocessor {
            color: var(--hl-orange);
        }
        .hl-meta.hl-preprocessor.hl-macro {
            color: var(--hl-orange);
        }
        // include <> and ""
        .hl-meta.hl-preprocessor.hl-include .hl-punctuation.hl-definition.hl-string {
            color: var(--hl-cyan);
        }
    }

    // c\2b\2b is escaped c++
    .hl-source.hl-c\2b\2b {
        .hl-storage.hl-modifier {
            color: var(--hl-green);
        }
    }

    .hl-text.hl-tex,
    .hl-text.hl-latex {
        .hl-punctuation.hl-section.hl-group {
            color: var(--hl-red);
        }
        .hl-punctuation.hl-definition.hl-arguments {
            color: var(--hl-red);
        }
        .hl-meta.hl-group.hl-braces {
            color: var(--hl-yellow);
        }
        .hl-variable.hl-parameter.hl-function {
            color: var(--hl-orange);
        }

        .hl-string.hl-other.hl-math {
            color: var(--hl-yellow);
        }
        .hl-constant.hl-other.hl-math {
            color: var(--hl-cyan);
        }
        .hl-constant.hl-character.hl-math {
            color: var(--hl-cyan);
        }
        .hl-punctuation.hl-definition.hl-constant.hl-math {
            color: var(--hl-red);
        }
        .hl-punctuation.hl-definition.hl-string {
            color: var(--hl-red);
        }

        .hl-variable.hl-parameter.hl-definition.hl-label {
            color: var(--hl-orange);
        }
        .hl-support.hl-function.hl-be {
            color: var(--hl-green);
        }
        // \subsection
        .hl-support.hl-function.hl-section {
            color: var(--hl-orange);
        }
        .hl-support.hl-function.hl-general {
            color: var(--hl-cyan);
        }
        // \label
        .hl-storage.hl-type.hl-label {
            color: var(--hl-cyan);
        }
        // \ref
        .hl-keyword.hl-other.hl-reference {
            color: var(--hl-cyan);
        }
    }

    .hl-source.hl-python {
        .hl-storage.hl-type.hl-class {
            color: var(--hl-green);
        }
        .hl-storage.hl-type.hl-function {
            color: var(--hl-green);
        }
        .hl-storage.hl-modifier.hl-global {
            color: var(--hl-green);
        }
        .hl-support.hl-type.hl-exception {
            color: var(--hl-yellow);
        }
    }

    .hl-source.hl-shell {
        // the #* in "${1#*=}"
        .hl-keyword.hl-operator.hl-expansion {
            color: var(--hl-green);
        }
    }

    .hl-source.hl-perl {
        .hl-support.hl-function {
            color: var(--hl-blue);
        }
    }

    .hl-source.hl-diff {
        .hl-meta.hl-range {
            color: var(--hl-blue);
        }
        .hl-entity.hl-name.hl-section {
            color: var(--hl-orange);
        }
        .hl-markup.hl-deleted {
            color: var(--hl-gray-5);
            background: var(--hl-bg-red);
        }
        .hl-markup.hl-inserted {
            color: var(--hl-gray-5);
            background: var(--hl-bg-green);
        }
    }

    .hl-js {
        .hl-variable.hl-other {
            &.hl-readwrite,
            &.hl-object,
            &.hl-constant {
                color: var(--hl-gray-3);
            }
        }
    }

    .hl-ts {
        .hl-keyword.hl-control {
            color: var(--hl-orange);
        }
    }
}

.theme-dark {
    // Adapted from https://github.com/highlightjs/highlight.js/blob/1b10552510a1ec13a3d30d46281dc268553ad157/src/styles/vs2015.css

    .hljs-keyword,
    .hljs-literal,
    .hljs-symbol,
    .hljs-name {
        color: #569cd6;
    }
    .hljs-link {
        color: #569cd6;
        text-decoration: underline;
    }

    .hljs-built_in,
    .hljs-type {
        color: #4ec9b0;
    }

    .hljs-number,
    .hljs-class {
        color: #b8d7a3;
    }

    .hljs-string,
    .hljs-meta-string {
        color: #d69d85;
    }

    .hljs-regexp,
    .hljs-template-tag {
        color: #9a5334;
    }

    .hljs-subst,
    .hljs-function,
    .hljs-title,
    .hljs-params,
    .hljs-formula {
        color: #dcdcdc;
    }

    .hljs-comment,
    .hljs-quote {
        color: #57a64a;
    }

    .hljs-doctag {
        color: #608b4e;
    }

    .hljs-meta,
    .hljs-meta-keyword,
    .hljs-tag {
        color: #9b9b9b;
    }

    .hljs-variable,
    .hljs-template-variable {
        color: #bd63c5;
    }

    .hljs-attr,
    .hljs-attribute,
    .hljs-builtin-name {
        color: #9cdcfe;
    }

    .hljs-section {
        color: #ffd700;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-bullet,
    .hljs-selector-tag,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo {
        color: #d7ba7d;
    }

    .hljs-addition {
        background-color: #024c00;
        color: #d9f2d8;
    }

    .hljs-deletion {
        background-color: #4c0000;
        color: #fecccc;
    }

    // Theme-dark styles for syntect-highlighted code start here

    --hl-gray-0: #bdd4e3;
    --hl-gray-1: #8fa1b3;
    --hl-gray-2: #c0c5ce;
    --hl-gray-4: #4f5b66;
    --hl-gray-5: #96b5b4;
    --hl-gray-6: #969896;
    --hl-dark-green: #359448;
    --hl-dark-blue-1: #329af0;
    --hl-dark-blue-2: #268bd2;
    --hl-dark-blue-3: #35a5ff;
    --hl-dark-yellow: #ebcb8b;
    --hl-dark-red: #bf616a;
    --hl-blue: #72c3fc;
    --hl-yellow: #fff3bf;
    --hl-red: #ffb0af;
    --hl-green-1: #d3f9d8;
    --hl-green-2: #a3be8c;
    --hl-purple: #b48ead;
    --hl-orange: #d08770;
    --hl-brown: #ab7967;
    --hl-black: #2b303b;
    --hl-white: #f2f4f8;
    --hl-bg-red: #bf616a;
    --hl-bg-dark-red: #350b10;
    --hl-bg-dark-green: #0e2414;

    .hl-source,
    .hl-text {
        color: var(--hl-gray-2);
    }

    .hl-variable.hl-parameter.hl-function {
        color: var(--hl-gray-0);
    }
    .hl-punctuation.hl-definition {
        color: var(--hl-gray-0);
    }

    // Comments
    .hl-comment,
    .hl-punctuation.hl-definition.hl-comment {
        color: var(--hl-dark-green);
    }

    .hl-keyword.hl-operator {
        color: var(--hl-dark-blue-1);
    }
    .hl-keyword {
        color: var(--hl-dark-blue-3);
    }

    .hl-variable {
        color: var(--hl-blue);
    }

    // Functions
    .hl-entity.hl-name.hl-function,
    .hl-meta.hl-require,
    .hl-support.hl-function.hl-any-method,
    .hl-variable.hl-function {
        color: var(--hl-yellow);
    }

    // Classes
    .hl-support.hl-class,
    .hl-entity.hl-name.hl-class,
    .hl-meta.hl-class {
        color: var(--hl-blue);
    }
    .hl-entity.hl-other.hl-inherited-class {
        color: var(--hl-red);
    }

    // Methods
    .hl-keyword.hl-other.hl-special-method {
        color: var(--hl-gray-1);
    }

    // Storage
    .hl-storage {
        color: var(--hl-dark-blue-1);
    }

    // Support
    .hl-support.hl-function {
        color: var(--hl-yellow);
    }

    // Strings
    .hl-string,
    .hl-constant.hl-other.hl-symbol {
        color: var(--hl-red);
    }
    // regexp literals
    .hl-string.hl-regexp {
        color: var(--hl-gray-5);
    }
    // escape sequences
    .hl-constant.hl-character.hl-escape {
        color: var(--hl-gray-5);
    }

    // Constants
    .hl-constant {
        color: var(--hl-dark-blue-1);
    }
    .hl-constant.hl-numeric {
        color: var(--hl-green-1);
    }
    .hl-constant.hl-other.hl-color {
        color: var(--hl-gray-5);
    }

    // Tags
    .hl-entity.hl-name.hl-tag {
        color: var(--hl-dark-blue-1);
    }

    // Attributes
    .hl-entity.hl-other.hl-attribute-name {
        color: var(--hl-blue);
    }

    // Attribute IDs
    .hl-entity.hl-other.hl-attribute-name.hl-id,
    .hl-punctuation.hl-definition.hl-entity {
        color: var(--hl-gray-1);
    }

    // Selector
    .hl-meta.hl-selector {
        color: var(--hl-purple);
    }

    // Headings
    .hl-markup.hl-heading,
    .hl-punctuation.hl-definition.hl-heading,
    .hl-entity.hl-name.hl-section {
        color: var(--hl-gray-1);
    }

    // Units
    .hl-keyword.hl-other.hl-unit {
        color: var(--hl-orange);
    }

    // Code
    .hl-markup.hl-raw.hl-inline {
        color: var(--hl-green-2);
    }

    /* Links */
    // link text
    .hl-string.hl-other.hl-link {
        color: var(--hl-dark-red);
    }
    // link URL
    .hl-meta.hl-link {
        color: var(--hl-orange);
    }
    // image URL
    .hl-meta.hl-image {
        color: var(--hl-orange);
    }

    // Lists
    .hl-markup.hl-list {
        color: var(--hl-dark-red);
    }

    // Embedded
    .hl-punctuation.hl-section.hl-embedded,
    .hl-variable.hl-interpolation {
        color: var(--hl-brown);
    }

    // Diff
    .hl-source.hl-diff {
        color: var(--hl-gray-6);

        .hl-meta.hl-range {
            color: var(--hl-dark-blue-2);
        }
        .hl-markup.hl-deleted {
            color: var(--hl-white);
            background: var(--hl-bg-dark-red);
        }
        .hl-markup.hl-inserted {
            color: var(--hl-white);
            background: var(--hl-bg-dark-green);
        }
    }
}

// Redesign theme overrides
.theme-redesign {
    .hl-source.hl-diff {
        .hl-markup.hl-deleted {
            background: var(--diff-remove-bg);
        }

        .hl-markup.hl-inserted {
            background: var(--diff-add-bg);
        }
    }
}
